<template>
  <el-card class="box-card-component" style="margin-left: 8px">
    <el-container>
      <el-header>CPU信息</el-header>
      <el-main>
        <el-row>
          <el-col :span="6">
            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">制造商</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ data.vendor }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">型号</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ data.model }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">频率</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">{{ data.mhz }}</div>
              </el-col>
            </el-row>

            <el-row>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple">核数</div>
              </el-col>
              <el-col
                :span="12"
              ><div class="grid-content bg-purple-light">
                {{ data.total_cores }}
              </div>
              </el-col>
            </el-row>
          </el-col>

          <el-col :span="18">
            <div id="cores" :class="className" :style="{height:height,width:width}" />
          </el-col>

        </el-row>
      </el-main>
    </el-container>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCPUDetail } from '@/api/detail'
import { Message } from 'element-ui'
require('echarts/theme/macarons') // echarts theme
import resize from '@/mixins/resize'

const animationDuration = 600

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        success: 'success',
        pending: 'danger'
      }
      return statusMap[status]
    }
  },
  mixins: [resize],
  props: {
    module: {
      type: Number,
      require: true,
      default() {
        return 0
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '310px'
    }
  },
  data() {
    return {
      chart: null,
      data: {
        vendor: '',
        model: '',
        mhz: 0,
        total_cores: 0,
        cores: []
      }
    }
  },
  computed: {
    ...mapGetters(['name', 'roles'])
  },
  watch: {
    data: function(newVal, oldVal) {
      if (this.chart && newVal) {
        let index = 0
        const core_usage_data = {}
        core_usage_data['index'] = []
        core_usage_data['busy'] = []
        core_usage_data['idel'] = []
        this.data.cores.forEach((element) => {
          const i = ++index
          core_usage_data['index'].push('第' + i + '核')
          core_usage_data['busy'].push(element.usage)
          core_usage_data['idel'].push(100 - element.usage)
        })
        let barwidth = '40%'
        if (index > 8 && index <= 24) {
          barwidth = '30%'
        } else if (index > 24 && index <= 48) {
          barwidth = '20%'
        } else if (index > 48) {
          barwidth = '10%'
        }
        this.chart.setOption({
          title: {
            text: 'CPU占用率',
            x: 'center',
            y: 'top',
            textStyle: {
              fontSize: 12,
              fontStyle: 'normal',
              fontWeight: 'normal'
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 20,
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: core_usage_data.index,
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                show: true,
                interval: 'auto',
                formatter: '{value} %'
              },
              axisTick: {
                show: true
              }
            }
          ],
          series: [
            {
              name: '使用率',
              type: 'bar',
              stack: 'cpus',
              barWidth: barwidth,
              data: core_usage_data.busy,
              animationDuration
            },
            {
              name: '空闲',
              type: 'bar',
              stack: 'cpus',
              barWidth: barwidth,
              data: core_usage_data.idel,
              animationDuration
            }
          ]
        })
      } else {
        this.chart = this.$echarts.init(
          document.getElementById('cores'),
          'macarons'
        )
      }
      this.chart.resize()
    }
  },
  mounted() {
    this.getZwmpDetail(this.module)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getZwmpDetail(module) {
      getCPUDetail(module)
        .then((response) => {
          this.data = response.data.cpu
          this.initChart()
        })
        .catch((error) => {
          Message.error(error)
        })
      const timer = setInterval(() => {
        getCPUDetail(module)
          .then((response) => {
            this.data = response.data.cpu
          })
          .catch((error) => {
            Message.error(error)
          })
      }, 1600)

      // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
      this.$once('hook:beforeDestroy', () => {
        console.log('清除定时器')
        clearInterval(timer)
      })
    },
    initChart() {
      this.chart = this.$echarts.init(
        document.getElementById('cores'),
        'macarons'
      )
    }
  }
}
</script>

<style lang="scss" >
.box-card-component {
  .el-card__header {
    padding: 0px !important;
  }
  .el-card__body {
    padding: 0px !important;
  }
}
</style>
<style lang="scss" scoped>
.box-card-component {
  .box-card-header {
    position: relative;
    height: 220px;
    img {
      width: 100%;
      height: 100%;
      transition: all 0.2s linear;
      &:hover {
        transform: scale(1.1, 1.1);
        filter: contrast(130%);
      }
    }
  }
  .card-panel-text {
    line-height: 18px;
    color: rgba(0, 0, 0, 0.55);
    font-size: medium;
    font-weight: bold;
    margin-top: 14px;
    margin-left: 14px;
  }
  .progress-item {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .el-header,
  .el-footer {
    background-color: #a4a4e6;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: #333;
    div {
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      margin: auto;
    }
  }

  .el-main {
    // background-color: #e9eef3;
    color: #333;
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    text-align: center;
    vertical-align: middle;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  @media only screen and (max-width: 1510px) {
    .mallki-text {
      display: none;
    }
  }
}
</style>
